<template>
    <div>
        <el-main class="main">
            <!-- 多条件输入框 -->
            <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item label="采购清单：">
                    <el-select v-model="formData.shoppingList" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in shoppingList" :key="item.id" :label="item.no" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="原料名称：">
                    <el-input v-model="formData.name" placeholder="原料名称" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="原料单编号：">
                    <el-input v-model="formData.no" placeholder="原料单编号" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="原料数量≥：">
                    <el-input v-model="formData.num" placeholder="" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="原料价格≥：">
                    <el-input v-model="formData.purchPrice" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="仓库：">
                    <el-select v-model="formData.storehouseid" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品供应商：">
                    <el-select v-model="formData.supplierid" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in supplier" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="formData.status" placeholder="请选择" style="width: 180px">

                        <el-option label="已入库" value="1"></el-option>
                        <el-option label="未入库" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 按钮 -->
                <el-button type="primary" @click="find">查询</el-button>
                <el-button type="warning" @click="empty">清空</el-button>
            </el-form>
            <el-col style="text-align: left">
                <!-- 添加表单 -->
                <el-button type="primary" @click="dialogVisible = true">添加原料单</el-button>
                <el-dialog title="添加原料单" :visible.sync="dialogVisible" width="30%">
                    <div>
                        <el-form label-width="80px" :model="formData">
                            <el-form-item label="采购清单">
                                <el-select v-model="formData.shoppingList" placeholder="请选择" style="width: 320px"
                                    @change="shoppingObj(formData.shoppingList)">
                                    <el-option v-for="item in addShopping" :key="item.id" :label="item.no"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="原料名称">
                                <el-input v-model="formData.name" style="width: 320px"></el-input>
                            </el-form-item>
                            <el-form-item label="商品名称">
                                <el-input v-model="formData.goodsid" :disabled="true" style="width: 320px"></el-input>
                            </el-form-item>
                            <el-form-item label="供应商名称">
                                <el-select v-model="formData.supplierid" placeholder="请选择" style="width: 320px">
                                    <el-option v-for="item in supplier" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="数量">
                                <el-input v-model="formData.num" style="width: 320px" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="采购价格">
                                <el-input v-model="formData.purchPrice" style="width: 320px"></el-input>
                            </el-form-item>
                            <el-form-item label="单位">
                                <el-input v-model="formData.unitid" :disabled="true" style="width: 320px"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库">
                                <el-select v-model="formData.storehouseid" placeholder="请选择" style="width: 320px">
                                    <el-option v-for="item in warehouse" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="add">添加</el-button>
                                <el-button type="info" @click="dialogVisible = false">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-dialog>
            </el-col>
            <!-- 列表 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="shoppingList" label="采购清单" width="180">
                </el-table-column>
                <el-table-column prop="no" label="原料单编号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="supplierid" label="供应商" width="180">
                    <template slot-scope="scope">
                        {{ getSupplierName(scope.row.supplierid) }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="是否入库" width="180">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status == '1'">
                            {{ '已入库' }}
                        </template>
                        <template v-if="scope.row.status == '0'">
                            {{ '未入库' }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="是否审核">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status == '1'">
                            {{ '已审核' }}
                        </template>
                        <template v-if="scope.row.status == '0'">
                            {{ '未审核' }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="数量"> </el-table-column>
                <el-table-column prop="unitid" label="单位">
                    <template slot-scope="scope">
                        {{ getUnitName(scope.row.unitid) }}
                    </template>
                </el-table-column>
                <el-table-column prop="purchPrice" label="入库单价"> </el-table-column>
                <el-table-column prop="price" label="入库总价">
                    <template slot-scope="scope">
                        {{ scope.row.purchPrice * scope.row.num }}
                    </template>
                </el-table-column>
                <el-table-column prop="storehouseid" label="入库仓库">
                    <template slot-scope="scope">
                        {{ getWarehouseName(scope.row.storehouseid) }}
                    </template>
                </el-table-column>
                <el-table-column prop="employeeid" label="仓管员">
                    <template slot-scope="scope">
                        {{ getEmployeeName(scope.row.employeeid) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 0" @click="pass(scope.row)" type="success">
                            审批
                        </el-button>
                        <el-button type="info" v-else>
                            已审批
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[5, 10]" :page-size="size"
                    layout=" prev, pager, next, jumper,total, sizes" :total="total">
                </el-pagination>
            </el-row>
        </el-main>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            //多条件查询
            formData: {
                shoppingList: '',
                name: '',
                no: '',
                supplierid: '',
                status: '',
                num: '',
                purchPrice: '',
                storehouseid: '',
                unitid: '',
                goodsid: '',
            },

            dialogVisible: false,
            page: 1,
            size: 5,
            total: 0,
            totalPage: 0,
            //采购清单数据
            shoppingList: [],
            //添加采购清单数据
            addShopping: [],
            //仓库数据
            storehouse: [],
            //供应商
            supplier: [],
            unitList: [],
            employee:[],

        };
    },
    mounted() {
        //查找原料单数据
        this.getData()
        //采购清单
        this.$axios.get("/material/shoppingList").then(res => {
            console.log(res.data.data);
            this.shoppingList = res.data.data
        })
        //添加采购清单数据
        this.$axios.get("/material/addShopping").then(res => {
            console.log(res.data.data);
            this.addShopping = res.data.data
        })
        //仓库
        this.$axios.get("/material/warehouse").then(res => {
            this.warehouse = res.data.data
        })
        //供应商
        this.$axios.get("/material/supplier").then(res2 => {
            console.log(res2.data.data);
            this.supplier = res2.data.data
        })
        //单位
        this.$axios.get("/unit/getAllUnit").then(res => {
            console.log(res.data.data);
            this.unitList = res.data.data
        })

        this.$axios.get("/employee/employeeList").then(res => {
            console.log(res.data.data);
            this.employee = res.data.data
        })

    },
    methods: {
        getSupplierName(supplierid) {
            const supplier = this.supplier.find(item => item.id === supplierid);
            return supplier ? supplier.name : null;
        },
        getWarehouseName(id) {
            const warehouse = this.warehouse.find(item => item.id === id);
            return warehouse ? warehouse.name : null;
        },
        getUnitName(id) {
            const unit = this.unitList.find(item => item.id === id);
            return unit ? unit.name : null;
        },
        getEmployeeName(id) {
            const emplo = this.employee.find(item => item.id === id);
            return emplo ? emplo.name : null;
        },
        //分页
        handleSizeChange(val) {
            //改变页面数据条数时的事件
            this.size = val
            this.getData(val)
        },
        handleCurrentChange(val) {
            //改变页数时的事件
            this.page = val
            this.getData(val)
        },
        getData() {
            this.$axios
                .get("/material/findAll/" + this.page + "/" + this.size)
                .then((res) => {
                    let resPage = res.data.data;
                    //
                    this.page = resPage.curPage;
                    // this.size = resPage.size;
                    this.total = resPage.total;
                    this.totalPage = resPage.totalPage;
                    this.tableData = resPage.data;
                });
        },
        //多条件查询
        find() {
            console.log("这是formData的值：" + JSON.stringify(this.formData));
            this.$axios.post("/material/findterm/" + this.page + "/" + this.size, this.formData).then(res => {
                let resPage = res.data.data;
                //
                this.page = resPage.curPage;
                // this.size = resPage.size;
                this.total = resPage.total;
                this.totalPage = resPage.totalPage;
                this.tableData = resPage.data;
            })
        },
        //清空
        empty() {
            this.formData = {}
            this.getData()
        },
        //审批
        pass(row) {
            this.$axios.post("/material/upStatus/" + row.id).then(res => {
                this.$message({
                    message: '审批成功',
                    type: 'success'
                });
                this.getData()
            })
        },
        //添加数据回显
        shoppingObj(shopId) {
            this.addShopping.forEach(item => {
                console.log(item);
                if (item.id == shopId) {
                    console.log("相等");
                    this.formData = item
                    this.formData.goodsid = item.productid
                }
            })
        },
        //添加原料单
        add() {
            console.log(JSON.stringify(this.formData));
            if (this.formData.shoppingList != null) {
                this.$axios.post("/material/add", this.formData).then(res => {
                    if (res.data.data = true) {
                        console.log("成功");
                        this.dialogVisible = false;
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.getData;
                        this.formData = {};
                    } else {
                        this.$message({
                            message: '添加失败,为false',
                            type: 'warning'
                        });
                    }
                })
                this.getData()
            } else {
                this.$message({
                    message: '添加失败，为null',
                    type: 'warning'
                });
            }
            this.getData()
        }


    },
};
</script>
<style scoped>
.row-with-margin {
    text-align: left;
    margin-bottom: 10px;
}

.main {
    background-color: white;
}
</style>
